import React from 'react';
import {
  QueryPlugin,
  ToolboxPlugin,
  SchemaPlugin,
  ContextMenuPlugin,
  PreviewPlugin,
  SavePlugin,
  ExportPlugin,
  ImportPlugin,
  PropertiesPlugin,
} from '@design/core';
import PreviewModal from '@design/desktop/components/Preview';
import { saveDesktopForm } from '@service/form';
import FormPlugin from './form';
import VisualPlugin from './visual';
import ContainerPlugin from './container';
import Queries from '../query';
import ContextMenuOption from './contextmenu';
import { ToolboxButton, toolboxOptions } from './toolbox';
import schema from './schema';
import RenderPlugin from './render';

const injectProps = props => {
  const getData = key => {
    if (key !== undefined) {
      return props.node.data.get(key);
    }
    return props.node.data.toJS();
  };
  const getStyle = key => {
    if (key !== undefined) {
      return props.node.style.get(key);
    }
    return props.node.style.toJS();
  };
  return {
    ...props,
    getData,
    getStyle,
  };
};

const ref = React.createRef();
const previewRef = React.createRef();
function ReactPlugin(options = {}) {
  const { plugins = [] } = options;
  let { toolbox = [] } = options;
  toolbox = toolboxOptions.concat(toolbox);
  return [
    SavePlugin({ save: saveDesktopForm }),
    
    ExportPlugin(),
    ImportPlugin(),
    QueryPlugin(Queries),
    ...plugins,
    FormPlugin({ injectProps }),
    VisualPlugin({ injectProps }),
    ContainerPlugin({ injectProps }),
    PreviewPlugin({ Component: PreviewModal, ref: previewRef }),
    ContextMenuPlugin(ContextMenuOption),
    PropertiesPlugin({ ref }),
    ToolboxPlugin({ toolbox, ToolboxButton }),
    RenderPlugin(),
    SchemaPlugin({ schema }),
  ];
}

export default ReactPlugin;
